<template>
  <div class="container">
    <el-alert
      title="确认支付前请先核对订单信息"
      type="success"
      :closable="false"
    ></el-alert>
    <!-- <div class="top-content">
      <span>收款人</span>
      <el-input style="width:300px" v-model="name" placeholder="收款人"></el-input>
      <span style="margin-left:20px">收款账号</span>
      <el-input style="width:300px" v-model="account" placeholder="收款账号"></el-input>
    </div> -->
    <div class="price-content">
      <span>金额</span>
      <span>￥{{ price }}</span>
    </div>
    <div class="pay-type-content">
      <div class="pay-type-item">
        <el-radio v-model="type" label="微信支付"></el-radio>
        <img src="@/assets/img/test/weixin.png" alt />
        <!-- <span>微信支付</span> -->
      </div>
      <div class="pay-type-item">
        <el-radio v-model="type" label="支付宝支付"></el-radio>
        <img src="@/assets/img/test/zhifubao.png" alt />
        <!-- <span>支付宝支付</span> -->
      </div>
      <div class="pay-type-item">
        <el-radio v-model="type" label="建设银行"></el-radio>
        <img src="@/assets/img/test/jianshe.png" alt />
        <!-- <span>建设银行</span> -->
      </div>
      <div class="pay-type-item">
        <el-radio v-model="type" label="农业银行"></el-radio>
        <img src="@/assets/img/test/nongye.png" alt />
        <!-- <span>农业银行</span> -->
      </div>
      <div class="pay-type-item">
        <el-radio v-model="type" label="中国银行"></el-radio>
        <img src="@/assets/img/test/zhongguo.png" alt />
        <!-- <span>中国银行</span> -->
      </div>
      <div class="pay-type-item">
        <el-radio v-model="type" label="交通银行"></el-radio>
        <img src="@/assets/img/test/jiaotong.png" alt />
        <!-- <span>交通银行</span> -->
      </div>
    </div>
    <div class="buton-content">
      <el-button @click="submitTap" type="primary">确认支付</el-button>
      <el-button @click="back()">返回</el-button>
    </div>
  </div>
</template>
<script>
// import { Message } from "element-ui";
export default {
  data() {
    return {
      name: "",
      account: "",
      type: "",
      table: "",
      obj: "",
      price: "",
      json: {},
    };
  },
  mounted() {
    let table = this.$storage.get("paytable");
    let obj = this.$storage.getObj("payObject");
    console.log(table);
    if (table == "shagndain") {
      this.price = obj.price;
    } else if (table == "yonghulingyang") {
      this.price = obj.lingyangfeiyong;
    } else if (table == "juanzhu") {
      this.price = 20;
    }
    this.table = table;
    this.obj = obj;
    // 获取用户信息
    this.$http({
      url: `${this.$storage.get("sessionTable")}/session`,
      method: "get",
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.json = data.data;
        console.log("json:", this.json);
      } else {
        this.$message.error(data.msg);
      }
    });
  },
  methods: {
    submitTap() {
      // if (!this.name) {
      //   this.$message.error("请输入收款人姓名");
      //   return;
      // }
      // if (!this.account) {
      //   this.$message.error("请输入收款人账号");
      //   return;
      // }
      if (!this.type) {
        this.$message.error("请选择支付方式");
        return;
      }
      this.$confirm(`确定支付?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.table == "shagndain") {
          console.log(this.json.address);
          if (this.json.address == undefined || this.json.address == "") {
            this.$message({
              message: "请先填写地址信息",
              type: "error",
              duration: 1500,
              onClose: () => {
                this.$router.go(-1);
              },
            });
            return;
          }
          let params = {
            orderid: this.orderCode(),
            tablename: "chongwuyongpin",
            userid: this.json.id,
            goodid: this.obj.id,
            goodname: this.obj.shangpinmingcheng,
            picture: this.obj.tupian,
            buynumber: 1,
            price: this.obj.price,
            status: "已支付",
            address: this.json.address,
            type: this.type,
          };

          this.$http({
            url: `orders/add`,
            method: "post",
            data: params,
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "下单成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$router.go(-1);
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        } else if (this.table == "yonghulingyang") {
          this.obj.ispay = "已支付";
          this.$http({
            url: `${this.table}/update`,
            method: "post",
            data: this.obj,
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "支付成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$router.go(-1);
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    orderCode() {
      var orderCode = "";
      for (
        var i = 0;
        i < 6;
        i++ //6位随机数，用以加在时间戳后面。
      ) {
        orderCode += Math.floor(Math.random() * 10);
      }
      orderCode = new Date().getTime() + orderCode; //时间戳，用来生成订单号。
      console.log(orderCode);
      return orderCode;
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  margin: 10px;
  font-size: 14px;
  span {
    width: 60px;
  }
  .top-content {
    display: flex;
    align-items: center;
    padding: 20px;
  }
  .price-content {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 20px;
    padding: 20px;
    border-bottom: 1px solid #eeeeee;
    font-size: 20px;
    font-weight: bold;
    color: red;
  }
  .pay-type-content {
    display: flex;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    span {
      width: 100px;
    }
    .pay-type-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 300px;
      margin: 20px;
      border: 1px solid #eeeeee;
      padding: 20px;
    }
  }
  .buton-content {
    margin: 20px;
  }
}
</style>
